<template>
	<view style="box-sizing: border-box;overflow: hidden; background-color: #ffffff; height: 100vh;">
		<!-- 背景 -->
		<view class="bg-image"></view>
		<image style="position: absolute;top: 80rpx;width: 400rpx;height: 300rpx;right: 50rpx;" src="/static/liwu.png" mode=""></image>
		<view style="color: #ffffff;font-size: 60rpx;font-weight: bold;position: absolute;top: 150rpx;left: 80rpx;">
			<view>千度</view>
			<view style="margin-left: 60rpx;">导航</view>
		</view>
		<!-- 表单域 -->
		<view class="content">
			<fui-section marginBottom="80" style="padding: 0;" title="登录" size="60" color="#fd5531"></fui-section>
			<fui-form ref="formRef" top="50">
				<fui-input backgroundColor="#F3F9FC" autocomplete="off" radius="20" placeholder="请输入手机号" v-model="formData.username">
					<template #left>
						<view class="fui-left__icon">
							<fui-icon name="mobile" color="var(--fui-color-primary)" :size="48"></fui-icon>
						</view>
					</template>
				</fui-input>
				<fui-input backgroundColor="#F3F9FC" autocomplete="off" radius="20" marginTop="60" :password="password" placeholder="请输入登录密码" v-model="formData.password">
					<template v-slot:left>
						<view class="fui-left__icon">
							<fui-icon name="captcha" color="var(--fui-color-primary)" :size="48"></fui-icon>
						</view>
					</template>
					<template #default>
						<view class="fui-left__icon">
							<fui-icon :name="password?'invisible':'visible'" color="var(--fui-color-primary)" :size="50" @click="password=!password"></fui-icon>
						</view>
					</template>

				</fui-input>

				<fui-input cursorSpacing="70" v-if="formItem.needCaptcha" autocomplete="off" backgroundColor="#F3F9FC" :padding="['10rpx','32rpx']" radius="20" marginTop="60" placeholder="请输入验证码" v-model="formData.captcha">
					<template v-slot:left>
						<view class="fui-left__icon">
							<fui-icon name="captcha" color="var(--fui-color-primary)" :size="48"></fui-icon>
						</view>
					</template>
					<template #default>
						<uni-captcha v-if="formItem.needCaptcha" focus ref="captchaRef" scene="login-by-pwd" />
					</template>
				</fui-input>

				<view style="margin-top: 80rpx;">
					<fui-button text="登录" bold :loading="formItem.loading" @click="login" background="linear-gradient(to right top, #ff6f49, #ff5a5e)"></fui-button>
				</view>
				<view class="register">
					<text @click="amend">忘记密码?</text>
					<text @click="toRegister">注册账号</text>
				</view>
			</fui-form>
		</view>

		<!-- 第三方登录 -->
		<BaseLogin></BaseLogin>
	</view>
</template>

<script setup>
	import { useLogin } from "@/hooks/useLogin"
	import { reactive, ref, computed } from "vue"
	// 校验规则
	const rules = reactive(
		[{
			name: "username",
			rule: ["required"],
			msg: ["请输入账号"]
		}, {
			name: "password",
			rule: ["required"],
			msg: ["请输入密码", "请输入正确的密码"]
		}]
	)
	const password = ref(true) //密码显示隐藏
	const formRef = ref(null) // 获取表单实例
	const captchaRef = ref(null) // 验证码实例
	const { formData, formItem, login, toRegister, amend } = useLogin(formRef,captchaRef,rules)

	const isCaptcha = computed(() => formItem.value.needCaptcha ? "58vh" : "50vh")


	const toWxlogin = () => {
		uni.navigateTo({
			url: '/pages/entrance/wxLogin/wxLogin'
		});
	}
</script>

<style lang="scss" scoped>
	.bg-image {
		width: 100%;
		height: 550rpx;
		background: linear-gradient(to right top, #ff6f49, #ff5a5e);
		background-size: cover;
		background-position: 0 -50rpx;
	}

	.content {
		width: 100%;
		height: v-bind(isCaptcha);
		box-sizing: border-box;
		background-color: var(--fui-color-white);
		border-radius: 60rpx;
		margin-top: -80rpx;
		padding: 80rpx;

		.u-form-item {
			margin-top: 50rpx;
			border-color: var(--secondary-color);
		}


		.register {
			display: flex;
			justify-content: space-between;
			padding: 10rpx 30rpx;
			font-size: 28rpx;
			color: var(--fui-color-subtitle);
			margin-top: 20rpx;
		}
	}

	.fui-left__icon {
		padding-right: 24rpx;
	}
</style>